<!--
 * @Descripttion: 动态函数
 * @Author: zhoujj
 * @Date: 2021-07-05 16:09:18
 * @LastEditors: zhoujj
 * @LastEditTime: 2022-05-25 14:53:27
-->
<script>
    export default {
        name: 'FormItemDemo',
        props: {
            itemConfig: Object // 接收配置，外部传入
        },
        render (createElement) {
            let childHeader = this.$slots.header
            console.log(this.itemConfig, 'createElement')
            return createElement('el-form-item', {
                props: {
                    prop: this.itemConfig.required ? this.itemConfig.formKey : '', // 必填属性
                    label: this.itemConfig.label
                }
            }, [
                createElement('div', { class: 'childHeader' }, childHeader),
                // 表单组件
                createElement(this.itemConfig.type, {
                    props: {
                        size: 'mini',
                        multiple: this.itemConfig.multiple ? 'multiple' : '',
                        value: this.itemConfig.value // 这里是自己实现一个 v-model
                    },
                    on: {
                        change: (nVal) => { // 这里是自己实现一个 v-model
                            console.log(nVal, 'val')
                            this.itemConfig.value = nVal
                        },
                        input: e => {
                            console.log(e, 'e')
                            this.itemConfig.value = e
                        }
                    }
                }, this.itemConfig.optionData && this.itemConfig.optionData.map(option => {
                    // 下拉数据
                    return createElement('el-option', { props: { label: option.label, value: option.value } })
                }))
            ])
        }
    }
</script>
